import React, { Component } from "react";
import { Menu } from "antd";
import { Link, withRouter } from "react-router-dom";
import MenuList from "@/config/menuConfig.js";
import * as Icon from "@ant-design/icons";

const { SubMenu } = Menu;
class LeftNav extends Component {
  UNSAFE_componentWillMount() {
    this.pathname = this.props.location.pathname;
    this.MenuNode = this.getMenuNode(MenuList);
  }
  getMenuNode = (menuList) => {
    return menuList.reduce((pre, item) => {
      if (item.children) {
        const cItem = item.children.find(
          (citem) => citem.key === this.pathname
        );
        if (cItem) {
          this.openNode = item.key;
        }
        pre.push(
          <SubMenu
            key={item.key}
            icon={React.createElement(Icon[item.icon], {})}
            title={item.title}
          >
            {this.getMenuNode(item.children)}
          </SubMenu>
        );
      } else {
        pre.push(
          <Menu.Item
            key={item.key}
            icon={React.createElement(Icon[item.icon], {})}
          >
            <Link to={item.key}>{item.title}</Link>
          </Menu.Item>
        );
      }
      return pre;
    }, []);
  };
  render() {
    return (
      <Menu
        theme="dark"
        mode="inline"
        defaultOpenKeys={[this.openNode]}
        selectedKeys={[this.props.location.pathname]}
      >
        {this.MenuNode}
      </Menu>
    );
  }
}
export default withRouter(LeftNav);
